var webpack = require('webpack');
var path = require('path');

// variables
var isProduction = process.argv.indexOf('-p') >= 0;
var sourcePath = path.join(__dirname, './src');
var outPath = path.join(__dirname, './dist');

// plugins
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');

// multiple extract instances
var extractCSS = new ExtractTextPlugin('style/[name]-[contenthash].css');
var extractLESS = new ExtractTextPlugin('style/[name]-less-[contenthash].css');
var extractSASS = new ExtractTextPlugin('style/[name]-sass-[contenthash].css');

module.exports = {
    context: sourcePath,
    entry: {
        app: './index.tsx',
        vendor: [
            // 'react',
            // 'react-dom',
            // 'react-router',
            // 'mobx',
            // 'mobx-react',
            // 'antd',
            'moment',
            // 'tinymce',
            'qrcodejs2'
        ]
    },
    output: {
        path: outPath,
        filename: 'bundle.js',
        // publicPath: '/'
    },
    target: 'web',
    resolve: {
        extensions: ['.js', '.ts', '.tsx'],
        // Fix webpack's default behavior to not load packages with jsnext:main module
        // https://github.com/Microsoft/TypeScript/issues/11677
        mainFields: ['main']
    },
    module: {
        loaders: [
            // .ts, .tsx
            {
                test: /\.tsx?$/,
                use: isProduction
                    ? 'awesome-typescript-loader?module=es6'
                    : [
                        'react-hot-loader',
                        'awesome-typescript-loader'
                    ]
            },

            // style
            {
                test: /\.css$/,
                use: extractCSS.extract({
                    fallback: 'style-loader',
                    use: [
                        {
                            loader: 'css-loader',
                            query: {
                                // modules: true,
                                sourceMap: !isProduction,
                                importLoaders: 1,
                                localIdentName: '[local]__[hash:base64:5]'
                            }
                        },
                        // {
                        //     loader: 'postcss-loader'
                        // }
                    ]
                })
            },
            {
                test: /\.less$/,
                use: extractLESS.extract({
                    fallback: 'style-loader',
                    use: ['css-loader', 'less-loader']
                })
            },
            {
                test: /\.(sass|scss)$/,
                use: extractSASS.extract({
                    fallback: 'style-loader',
                    use: ['css-loader', 'sass-loader']
                })
            },

            // static assets
            { test: /\.html$/, loader: 'html-loader' },
            { test: /\.png$/, loader: 'url-loader?limit=10000' },
            { test: /\.jpg$/, loader: 'file-loader' },
        ],
    },
    plugins: [
        extractCSS,
        extractLESS,
        extractSASS,
        // new webpack.LoaderOptionsPlugin({
        //     options: {
        //         context: sourcePath,
        //         postcss: [
        //             require('postcss-import')({ addDependencyTo: webpack }),
        //             require('postcss-url')(),
        //             require('postcss-cssnext')(),
        //             require('postcss-reporter')(),
        //             require('postcss-browser-reporter')({ disabled: isProduction }),
        //         ]
        //     }
        // }),
        new webpack.optimize.CommonsChunkPlugin({
            name: 'vendor',
            filename: 'vendor-[hash].js',
            minChunks: Infinity
        }),
        new webpack.optimize.AggressiveMergingPlugin(),
        // new ExtractTextPlugin({
        //     filename: 'styles.css',
        //     disable: !isProduction
        // }),
        new HtmlWebpackPlugin({
            template: 'assets/index.html',
        })
    ],
    devServer: {
        contentBase: sourcePath,
        hot: true,
        stats: {
            warnings: false
        },
    },
    node: {
        // workaround for webpack-dev-server issue
        // https://github.com/webpack/webpack-dev-server/issues/60#issuecomment-103411179
        fs: 'empty',
        net: 'empty'
    },
    externals: {
        "react": "React",
        "react-dom": "ReactDOM",
        "react-router": "ReactRouter",
        "mobx": "mobx",
        "mobx-react": "mobxReact",
        "antd": "antd",
        "tinymce": "tinyMCE"
    },
};